<template>
 <div class="shoplist">
     <div class="item-msg" v-for="(each,i) of data" :key="i">
         <router-link :to="{name:'details',params:{data:data[i]}}">
             <img :src='each.imgurl' alt="" class="item-img">
            <p>{{each.sdec}}</p>
            <span style="color:red">￥{{each.price}}</span>
        </router-link>
     </div>
<!--   
  <router-link :to="{name:'details',params:{data:data[1]}}"><img src="../assets/shop/shop01.jpg" alt=""></router-link>
  <router-link :to="{name:'details',params:{data:data[2]}}"><img src="../assets/shop/shop03.jpg" alt=""></router-link> -->
</div>
</template>
<script>
export default {
 data(){
    return{
      data:[{sdec:'CSGO-折叠伞-深红之网',price:149.00,imgurl:require('../assets/shop/shopp01.jpg')},
      {sdec:'CSGO-CAC主题选手服',price:488.00,imgurl:require('../assets/shop/shopp02.jpg')},
      {sdec:'CS:GO 暴怒野兽帽衫',price:549.00,imgurl:require('../assets/shop/shopp03.jpg')}
      ]
    }
  },
}
</script>

<style lang="scss" scoped>
.shoplist{
  width:100%;
  display: flex;
  flex-wrap: wrap;;
  .item-msg{
      width:50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      img{
          width: 100%;
      }
  }
}
</style>